<template>
  <div class="home">
    <swiper ref="mySwiper" :options="swiperOptions" v-if="bannerList.length!= 0">
      <swiper-slide v-for="item in bannerList">
        <img class="banner" :src="item.image" alt="">
        <div class="swiper-button-prev">
          <img src="@/assets/home/carousel_left.png" alt="" style="width: 58px;height: 58px">
        </div>
        <div class="swiper-button-next">
          <img src="@/assets/home/carousel_right.png" alt="" style="width: 58px;height: 58px">
        </div>
      </swiper-slide>
    </swiper>
    <!--    产品-->
    <div class="product">
      <!--    导航-->
      <div>
        <div class="product_img">
          {{ $t('home.product') }}
        </div>
        <el-menu
            class="el-menu-demo gnav"
            background-color="#005597"
            text-color="#FFFFFF"
            active-text-color="#FFAE36"
            :default-active="dActive"
            @open="subMenuOpen"
            unique-opened
        >
          <template v-for="item in productNav.child">
            <el-submenu v-if="item.child.length" :index="'' + item.id" :key="item.id">
              <template slot="title">
                {{ item.name }}
              </template>
              <el-menu-item
                  v-for="(items, key) in item.child"
                  :key="key"
                  :index="'' + items.id"
                  @click="clickMenu(items)"
              >
                {{ items.name }}
              </el-menu-item>
            </el-submenu>
            <el-menu-item v-else :index="''+item.id" :key="item.id" @click="clickMenu(item)">
              {{ item.name }}
            </el-menu-item>
          </template>
        </el-menu>
      </div>
      <!--      产品列表-->
      <div class="product_list">
        <div class="header">
          <div class="left">
            <v-img
                contain
                width="20"
                height="20"
                src="@/assets/pmenu.png"
                style="margin-right: 10px"
            ></v-img>
            {{ productListTitle }}
          </div>
          <div class="right">
            <template v-if="allPage > 1">
              <img src="@/assets/searchResults/firstPage.png" alt="" @click="firstPage">
              <img src="@/assets/searchResults/prev.png" alt="" @click="prevPage">
              <span>{{ $t('pl.l1') }}&nbsp;{{page}}&nbsp;{{ $t('pl.page') }}，{{ $t('pl.all') }}&nbsp;{{ allPage }}&nbsp;{{ $t('pl.page') }}</span>
              <img src="@/assets/searchResults/next.png" alt="" @click="pageNext">
              <img src="@/assets/searchResults/endPage.png" alt="" @click="endPage">
            </template>
          </div>
        </div>
        <div class="list" v-if="productList.length > 0">
          <div class="list_item" v-for="item in productList" @click="toDetail(item)">
            <v-hover v-slot=" {hover} ">
              <div class="product_list_img">
                <img style="width: 204px;height: 204px" :src="item.image"/>
                <v-img class="product_list_img_item" v-if="hover"
                       contain
                       width="64"
                       height="64"
                       src="@/assets/home/magnifier.png"
                ></v-img>
              </div>

            </v-hover>
            <div>
              {{ item.name?item.name:item.title }}
            </div>
          </div>
        </div>
        <el-empty v-else description="暂无更多"></el-empty>
      </div>
    </div>
    <!--      发展-->
    <div class="introduce" v-if="aboutUs.length > 0">
      <div class="intr_header">
        <v-img
            contain
            width="230"
            height="280"
            src="@/assets/home/fz_h_left.png"
        ></v-img>
      </div>
      <div class="items">
        <div class="introduce_item" v-for="(item,index) in aboutUs">
          <template v-if="((index + 1) % 2) != 0">
            <div class="left">
              <v-img
                  contain
                  width="550"
                  height="350"
                  :src="item.image"
              ></v-img>
            </div>

            <div class="null"></div>
            <div class="right desc">
              <div class="header">
                <img src="@/assets/home/desc_icon.png"/>
                <span>{{ item.title }}</span>
              </div>
              <div class="dcontent">
                {{ item.description }}
              </div>
            </div>
          </template>
          <template v-else>
            <div class="right desc">
              <div class="header">
                <img src="@/assets/home/desc_icon.png"/>
                <span>{{ item.title }}</span>
              </div>
              <div class="dcontent">
                {{ item.description }}
              </div>
            </div>
            <div class="null"></div>
            <div class="left">
              <v-img
                  contain
                  width="550"
                  height="350"
                  :src="item.image"
              ></v-img>
            </div>
          </template>
        </div>
      </div>
      <v-img
          class="bottom_right"
          width="186"
          height="265"
          src="@/assets/home/fz_h_right.png"
      >
      </v-img>

    </div>
    <!--    产品优势-->
    <div class="advantage">
      <div class="title">
        <div>
          {{ $t('home.advantage.title') }}
        </div>
        <div>
          ADVANTAGE
        </div>
      </div>
      <div class="list">
        <div class="l_item">
          <v-img
              contain
              width="68"
              height="68"
              src="@/assets/home/advantage1.png"
              style="margin: 0 auto 22px auto"
          ></v-img>
          <span>{{ $t('home.advantage.list.l1') }}</span>
        </div>
        <div class="l_item">
          <v-img
              contain
              width="68"
              height="68"
              src="@/assets/home/advantage2.png"
              style="margin: 0 auto 22px auto"
          ></v-img>
          <span>{{ $t('home.advantage.list.l2') }}</span>
        </div>
        <div class="l_item">
          <v-img
              contain
              width="68"
              height="68"
              src="@/assets/home/advantage3.png"
              style="margin: 0 auto 22px auto"
          ></v-img>
          <span>{{ $t('home.advantage.list.l3') }}</span>
        </div>
        <div class="l_item">
          <v-img
              contain
              width="68"
              height="68"
              src="@/assets/home/advantage4.png"
              style="margin: 0 auto 22px auto"
          ></v-img>
          <span>{{ $t('home.advantage.list.l4') }}</span>
        </div>
      </div>
    </div>
    <!--    服务中心-->
    <div class="server">
      <div class="top1">
        SERVICE SUPPORT
      </div>
      <div class="top2">
        {{ $t('home.service.title') }}
      </div>
      <div class="server_bottom">
        <div class="desc s_i" v-for="item in serviceList">
          <div class="header">
            <img src="@/assets/home/desc_icon.png"/>
            <span>{{ item.title }}</span>
          </div>
          <div class="dcontent">
            {{ item.description }}
          </div>
          <img style="width: 490px;height: 200px;" :src="item.image" alt="">
        </div>
      </div>
    </div>
    <!--    解决方案-->
    <div style="width: 100%;background-color: #00A3E6;">
      <div class="programme">
        <div class="left">
          <div class="top">
            <div>{{ $t('home.service.title2') }}</div>
            <div>Provide multiple solutions</div>
          </div>
          <div class="bottom">
            {{ $t('home.service.subtitle') }}
          </div>
        </div>
        <div class="right">
          <v-img class="right_img"
                 contain
                 width="210"
                 height="162"
                 src="@/assets/home/fa1.png"
          ></v-img>
          <v-img class="right_img"
                 contain
                 width="210"
                 height="162"
                 src="@/assets/home/fa2.png"
          ></v-img>
          <v-img class="right_img"
                 contain
                 width="210"
                 height="162"
                 src="@/assets/home/fa3.png"
          ></v-img>
        </div>
      </div>
    </div>
    <!--    新闻咨询-->
    <div class="server">
      <div class="top1">
        NEWS AND INFORMATION
      </div>
      <div class="top2">
        {{ $t('home.newTitle') }}
      </div>
      <div class="news">
        <div class="news_block">
          <div class="item" v-for="item in homeNewList" @click="toNewsDetail(item.id)">
            <div class="left">
              <div>{{ item.show_time.slice(5, 7) }}/{{ item.show_time.slice(8, 10) }}</div>
              <div>{{ item.show_time.slice(0, 4) }}</div>
            </div>
            <div class="right">
              <div class="title">{{ item.title }}</div>
              <div class="content">
                {{ item.description }}
              </div>
            </div>
          </div>
          <!--        </div>-->
          <!--        <div class="news_block">-->
        </div>
      </div>
      <div style="width: 100%;text-align: center">
        <v-btn
            @click="goNewList"
            style="margin: 80px auto 100px auto"
            dark
            color="#00A3E6"
        >{{ $t('home.advantage.more') }} >
        </v-btn>
      </div>

    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import {Swiper, SwiperSlide, directive} from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import {getBanner, getNavListThere} from "@/api/home";
import {getContent, getNewList} from "@/api/new";
import {getProductClass, getProductList} from "@/api/product";

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  },
  computed: {},
  data() {
    return {
      swiperOptions: {
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      },
      bannerList: [],
      advantageList: [],
      homeNewList: [],
      productNav: [],
      dActive: null,
      productListTitle: '',
      productClassId: null,
      productListAll:[], // 所有分类数据
      productList: [],
      serviceList: [],
      aboutUs: [],
      one: 0,
      two: 0,
      page: 1, // 产品当前页
      allPage: 1, // 产品数据总页数
      pageSize: 12 // 每页数量
    }
  },
  created() {
    getBanner().then(res => {
      this.bannerList = res.data
    }).catch(err => {

    })
    getContent({
      mid: 8
    }).then(res => {
      this.serviceList = res.data
    }).catch(err => {

    })
    getContent({
      mid: 9
    }).then(res => {
      this.aboutUs = res.data
    }).catch(err => {

    })

    getContent({mid: 2}).then(res => {
      let narr = res.data
      this.homeNewList = narr.slice(0, 4)
    }).catch(err => {
    })

    getNavListThere().then(res => {
      let rdata = res.data
      this.productNav = rdata[0]
      this.dActive = this.productNav.id.toString()
      let childs = []
      // if (this.productNav.child.length >0) {
      //   this.dActive = this.productNav.child[0].id
      //   childs = this.productNav.child[0].child
      //   this.productListTitle = this.productNav.child[0].name
      //   if (this.productNav.child[0].child.length > 0) {
      //     this.dActive = this.productNav.child[0].child[0].id
      //     childs = this.productNav.child[0].child[0].child
      //     this.productListTitle = this.productNav.child[0].child[0].name
      //   }
      // }


      // this.getProductClass(this.dActive)
      this.getChildClass(this.productNav)
    }).catch(err => {

    })

  },
  methods: {
    toDetail(item) {
      // if (item.is_nav) {
      //   this.$router.push({
      //     name: 'productList',
      //     query: {
      //       id: item.id,
      //       name: item.name
      //     }
      //   }, () => {
      //   })
      // } else {
      //   this.$router.push({
      //     name: 'productDetails',
      //     query: {
      //       id: item.id
      //     }
      //   },() =>{})
      // }
      // return
      if (item.child == undefined){
          this.$router.push({
            name: 'productList',
            query: {
              id: item.id,
              name: item.name
            }
          }, () => {
          })
      } else {
        this.getChildClass(item)
      }
    },
    toNewsDetail(id) {
      this.$router.push({
        name: 'newDetail',
        query: {
          id: id
        }
      }, () => {
      })
    },
    subMenuOpen(item, cr) {
      let openItem = this.productNav.child.find((navChild) => navChild.id == item)

      this.getChildClass(openItem)
    },
    getProductClass(pid) {
      // console.log(pid)
      this.productClassId = pid
      getProductList({pid:pid}).then(res => {
        let arr = res.data
        this.productList = arr.slice(0, 12)
      })
    },
    getChildClass(item) {

      this.productListAll = item.child
      this.calcPageNumber(item.child.length)
      // this.productList = item.child.slice(0, 12)
      this.dActive = item.id.toString()
      this.productListTitle = item.name
      this.getProductForPage(this.page)
      // if (item.child.length == 0){
      //   this.getProductClass(item.id)
      // } else {
      //   this.productList = item.child.slice(0, 12)
      // }
      // let arr = item.child
      // this.productList = arr.slice(0, 12)


    },
    clickMenu(item) {
      this.getChildClass(item)
      this.productListTitle = item.name
    },
    clickMore() {
      this.$router.push({
        name: "productList",
        query: {
          id: this.productClassId,
          name: this.productListTitle
        }
      }, () => {
      })
    },
    goNewList() {
      this.$router.push({
        name: "news"
      }, () => {
      })
    },

    // 计算页数
    calcPageNumber(length) {
      this.page = 1
      this.allPage = Math.ceil(length / this.pageSize); // 向上取整页码
    },

    // 根据页码取出值
    getProductForPage(){
      console.warn("getProductForPage: ",(this.page - 1) * this.pageSize)
      console.warn("getProductForPage:",this.page * this.pageSize)

      this.productList = this.productListAll.slice((this.page - 1) * this.pageSize,this.page * this.pageSize)
    },

    // 第一页
    firstPage() {
      this.page = 1
      this.getProductForPage()
    },
    // 最后一页
    endPage() {
      this.page = this.allPage
      this.getProductForPage()
    },

    // 上一页
    prevPage(){
      if (this.page != 1){
        this.page -= 1
        this.getProductForPage()
      }
    },

    // 下一页
    pageNext() {
        if (this.page < this.allPage){
          this.page += 1
          this.getProductForPage()
        }
    }
  }
}
</script>

<style lang="less" scoped>
.banner {
  width: 100%;
  height: 500px;
}

.gnav {
  width: 220px;
  background-color: #005597;
  color: #FFFFFF;
}

/deep/ .carousel {
  .v-window__container {
    .v-window__next {
      right: 0;
    }
  }

  .carousel_icon {
    width: 58px;
    height: 58px;
  }
}

.product {
  display: flex;
  width: 1180px;
  margin: 60px auto 20px auto;

  .product_img {
    width: 220px;
    height: 90px;
    background-image: url("@/assets/pback.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-size: 24px;
    color: #FFFFFF;
    line-height: 90px;
    text-align: center;
  }

  .product_list {
    //margin-left: 20px;
    padding-left: 20px;

    .header {
      padding: 12px 20px 12px 15px;
      width: 960px;
      height: 46px;
      background-color: #F6F6F6;
      color: #00A3E6;
      font-size: 16px;
      display: flex;
      justify-content: space-between;

      .left {
        display: flex;
        align-items: center;
      }

      .right {
        color: #666666;
        font-size: 16px;

        span {
          margin-right: 10px;
        }

        img {
          width: 14px;
          height: 14px;
          margin-right: 10px;
        }
      }
    }

    .list {
      width: 960px;
      box-sizing: border-box;
      padding: 30px 30px 0 30px;

      .list_item {
        display: inline-block;
        width: 204px;
        margin-right: 28px;
        //height: 260px;

        div {
          color: #00A3E6;
          font-size: 14px;
          text-align: center;
          margin-top: 15px;
          margin-bottom: 30px;
        }

        &:nth-child(4n) {
          margin-right: 0px;
        }

        .product_list_img {
          position: relative;

          .product_list_img_item {
            position: absolute;
            top: 70px;
            left: 70px;
          }
        }
      }

    }
  }
}


.introduce {
  min-height: 686px;
  position: relative;

  .intr_header {
    width: 100%;
    height: 280px;
    background-color: #F6F6F6;
  }

  .introduce_item {
    //position: absolute;
    //margin: 0 auto;
    margin-bottom: 100px;
    display: flex;
    width: 1200px;
    height: 350px;

    .left .right {
      width: 550px;
    }

    .null {
      width: 100px;
    }
  }

  .bottom_right {
    position: absolute;
    right: 0;
    bottom: 0;
  }

  .items {
    border: 1px solid transparent;
    position: relative;
    top: -70px;
    left: 360px;
  }
}

.advantage {
  display: flex;
  width: 100%;

  .title {
    background-color: #00A3E6;
    width: 612px;
    height: 250px;
    display: flex;
    align-content: center;
    flex-wrap: wrap;

    div {
      width: 100%;
      text-align: right;
      padding-right: 52px;
      color: #FFFFFF;
    }

    div:nth-child(1) {
      font-weight: bold;
      font-size: 28px;
      padding-right: 88px;
    }

    div:nth-child(2) {
      font-size: 78px;
      color: rgba(255, 255, 255, 0.2);
    }
  }

  .list {
    display: flex;
    align-items: center;
    width: calc(100% - 612px);
    height: 250px;
    background-image: url("@/assets/home/advantageBack.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-left: 70px;

    .l_item {
      width: 180px;
      margin: 0 35px;
      //text-align: center;
      color: #FFFFFF;
      font-size: 16px;
    }
  }
}

.server {
  padding-top: 145px;
  margin-bottom: 120px;

  .top1 {
    font-weight: bold;
    font-size: 36px;
    color: #333333;
    text-align: center;
    margin-bottom: 6px;
  }

  .top2 {
    color: #00A3E6;
    font-size: 18px;
    text-align: center;
    //margin-bottom: 92px;
  }

  .server_bottom {

    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    width: 1200px;
    flex-wrap: wrap;

    .s_i {
      width: 490px;
      margin-top: 90px;

      .dcontent {
        margin-bottom: 40px;
      }
    }
  }

  //  -----------------------
  .news {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    //justify-content: space-between;
    .news_block {
      cursor: pointer;

      .item {
        display: inline-block;
        margin-right: 76px;
        margin-top: 52px;
        padding-bottom: 30px;
        width: 562px;
        //display: flex;
        border-bottom: 1px solid #D8D8D8;

        .left {
          width: 60px;
          color: #333333;

          div:nth-child(1) {
            font-size: 22px;
          }

          div:nth-child(2) {
            font-size: 12px;
          }
        }

        .right {
          width: calc(100% - 60px);
          padding-left: 36px;

          .title {
            font-size: 16px;
            color: #333333;
            margin-bottom: 10px;
            width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
          }

          .content {
            line-height: 24px;
            font-size: 14px;
            color: #666666;
            width: 100%;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; /* 这里是超出几行省略 */
            overflow: hidden;
          }
        }

      }

      .item:nth-child(2n) {
        margin-right: 0;
      }
    }
  }

}

.programme {
  display: flex;
  height: 320px;
  width: 1200px;
  margin: 0 auto;

  .left {
    width: 380px;
    height: 100%;
    display: flex;
    align-content: center;
    flex-wrap: wrap;

    .top {
      //display: flex;

      div:nth-child(1) {
        font-size: 32px;
        color: #FFFFFF;
      }

      div:nth-child(2) {
        font-size: 24px;
        color: rgba(255, 255, 255, 0.37);
      }
    }

    .bottom {
      margin-top: 20px;
      font-size: 16px;
      color: #FFFFFF;
    }
  }

  .right {
    width: calc(100% - 420px);
    padding-left: 150px;
    display: flex;
    align-items: center;

    .right_img {
      margin-right: 20px;
    }
  }
}

.desc {
  width: 100%;

  .header {
    display: flex;
    //justify-content: left;
    font-size: 24px;
    color: #333333;
    height: 40px;
    margin-bottom: 50px;

    image {
      width: 40px;
      height: 40px;
    }

    span {
      margin-left: 15px;
      line-height: 40px;
    }
  }

  .dcontent {
    font-size: 14px;
    color: #666666;
    line-height: 30px;
    max-height: 260px;
  }

}


.swiper-button-prev {
  &:after {
    display: none; /**/
  }

  left: 35px;
}

.swiper-button-next {
  &:after {
    display: none;
  }

  right: 35px;
}

</style>
